<template>
  <div>
    <Layout :style="{minHeight: '100vh'}">
      <Sider ref="side1" hide-trigger collapsible :collapsed-width="78" v-model="isCollapsed">

      <Menu  theme="dark" active-name="2" width="auto" height=" height:calc(100vh - 145px);">
          <MenuItem name="全部文件">
            <Icon type="folder"></Icon>
            全部文件
          </MenuItem>
          <MenuItem name="文档">
            <Icon type="document-text"></Icon>
            文档
          </MenuItem>
          <MenuItem name="图片">
            <Icon type="images"></Icon>
            图片
          </MenuItem>
          <MenuItem name="视频">
            <Icon type="videocamera"></Icon>
            视频
          </MenuItem>
          <MenuItem name="音乐">
            <Icon type="music-note"></Icon>
            音乐
          </MenuItem>
          <MenuItem name="我的分享">
            <Icon type="share"></Icon>
            我的分享
          </MenuItem>
          <MenuItem name="回收站">
            <Icon type="trash-a"></Icon>
            回收站
          </MenuItem>
        </Menu>
      </Sider>
      <Layout>
          <div style="width:100% ;overflow: hidden;background-color: white;padding: 10px 10px 0px 10px;">
            <Upload style="display: inline-block;"
                multiple
                action="//jsonplaceholder.typicode.com/posts/">
                <Button type="primary" icon="ios-cloud-upload-outline">上传</Button>
              </Upload>
              <Button type="ghost">新建文件夹</Button>
              <Button type="ghost">下载</Button>
          </div>
          <Table :height="fileTableHeight" ref="selection" stripe :columns="columns4" :data="data1"></Table>
      </Layout>
    </Layout>
  </div>
</template>
<script>
  var imgExt = new Array(".png",".jpg",".jpeg",".bmp",".gif");//图片文件的后缀名
  var docExt = new Array(".doc",".docx");//word文件的后缀名
  var xlsExt = new Array(".xls",".xlsx");//excel文件的后缀名
  var cssExt = new Array(".css");//css文件的后缀名
  var jsExt = new Array(".js");//js文件的后缀名
  var pdfExt = new Array(".pdf");//pdf文件的后缀名
  var videoExt = new Array(".mp4",".flv",'.rmvb','.avi');//video文件的后缀名
  var zipExt = new Array(".zip",".rar",".7z",".gz");//zip文件的后缀名
  var txtExt = new Array(".txt");//zip文件的后缀名


  //获取文件名后缀名
  String.prototype.extension = function(){
    var ext = null;
    var name = this.toLowerCase();
    var i = name.lastIndexOf(".");
    if(i > -1){
      var ext = name.substring(i);
    }
    return ext;
  }

  //判断Array中是否包含某个值
  Array.prototype.contain = function(obj){
    for(var i=0; i<this.length; i++){
      if(this[i] === obj)
        return true;
    }
    return false;
  };

  String.prototype.extMatch = function(extType){
    if(extType.contain(this.extension()))
      return true;
    else
      return false;
  }
  String.prototype.fileImg = function(){
    if(this.extMatch(imgExt))
      return ''
    else if(this.extMatch(docExt))
      return 'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3962060250,1311105975&fm=58&u_exp_0=3395026635,977800565&fm_exp_0=86&bpow=273&bpoh=250'
    else if(this.extMatch(cssExt))
      return ''
    else if(this.extMatch(pdfExt))
      return 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1520491167914&di=0a58b8deca92e892de5878c5cb1a72e5&imgtype=0&src=http%3A%2F%2Fwww.dnaps.com%2Fuploadfile%2F2015%2F0420%2F20150420050912767.jpg'
    else if(this.extMatch(xlsExt))
      return 'https://gss3.bdstatic.com/-Po3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=82ce4921c45c1038247ec9c48a2af42e/0eb30f2442a7d933a30bad48af4bd11373f0016d.jpg'
    else if(this.extMatch(jsExt))
      return ''
    else if(this.extMatch(videoExt))
      return 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3757668374,1588739745&fm=27&gp=0.jpg'
    else if(this.extMatch(zipExt))
      return 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=29653396,3142103147&fm=27&gp=0.jpg'
    else if(this.extMatch(txtExt))
      return 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=276425994,3022881041&fm=27&gp=0.jpg'
    else
      return 'https://www.easyicon.net/api/resizeApi.php?id=1205611&size=128'
  }
  export default {
    name: '文件',
    data () {
      return {
        screenHeight: document.body.clientHeight,
        fileTableHeight:300,
        columns4: [
          {
            type: 'selection',
            width: 60,
            align: 'right'
          },
          {
            title: '文件名',
            key: 'name',
            width: '70%',
            render: (h, params) => {
              return h('div', [
                h('Avatar', {
                  props: {
                    src: params.row.name.fileImg(),
                    shape: 'square',
                    size:'small'
                  },
                  style: {
                    marginRight:'10px'
                  }
                }),
                h('span', params.row.name)
              ]);
            }
          },{
            title: '大小',
            key: 'age',
            render: (h, params) => {
              return h('div',[
                h('span',params.row.age),
                h('span','kb')
              ])
            }
          },
          {
            title: '修改日期',
            key: 'date'
          }
        ],
        data1: [
          {
            name: '项目实施方法论.doc',
            age: 18,
            address: 'New York No. 1 Lake Park',
            date: '2016-10-03'
          },
          {
            name: '使用PDI搭建开源数据交换平台.pdf',
            age: 24,
            address: 'London No. 1 Lake Park',
            date: '2016-10-01'
          },
          {
            name: 'main.doc',
            age: 24,
            address: 'London No. 1 Lake Park',
            date: '2016-10-01'
          },
          {
            name: '项目周报.xls',
            age: 30,
            address: 'Sydney No. 1 Lake Park',
            date: '2016-10-02'
          },{
            name: '湖光山色.mp4',
            age: 30,
            address: 'Sydney No. 1 Lake Park',
            date: '2016-10-02'
          },{
            name: '湖光山色.avi',
            age: 30,
            address: 'Sydney No. 1 Lake Park',
            date: '2016-10-02'
          },
          {
            name: 'Test.txt',
            age: 26,
            address: 'Ottawa No. 2 Lake Park',
            date: '2016-10-04'
          },
          {
            name: '高等职业院校内部质量保证体系建立与运行实务.pdf',
            age: 26,
            address: 'Ottawa No. 2 Lake Park',
            date: '2016-10-04'
          },{
            name: '项目实施方法论.doc',
            age: 18,
            address: 'New York No. 1 Lake Park',
            date: '2016-10-03'
          },
          {
            name: '使用PDI搭建开源数据交换平台.pdf',
            age: 24,
            address: 'London No. 1 Lake Park',
            date: '2016-10-01'
          },
          {
            name: 'main.doc',
            age: 24,
            address: 'London No. 1 Lake Park',
            date: '2016-10-01'
          },
          {
            name: '项目周报.xls',
            age: 30,
            address: 'Sydney No. 1 Lake Park',
            date: '2016-10-02'
          },{
            name: '湖光山色.mp4',
            age: 30,
            address: 'Sydney No. 1 Lake Park',
            date: '2016-10-02'
          },{
            name: '湖光山色.avi',
            age: 30,
            address: 'Sydney No. 1 Lake Park',
            date: '2016-10-02'
          },
          {
            name: 'Test.txt',
            age: 26,
            address: 'Ottawa No. 2 Lake Park',
            date: '2016-10-04'
          },
          {
            name: '高等职业院校内部质量保证体系建立与运行实务.pdf',
            age: 26,
            address: 'Ottawa No. 2 Lake Park',
            date: '2016-10-04'
          },{
            name: '项目实施方法论.doc',
            age: 18,
            address: 'New York No. 1 Lake Park',
            date: '2016-10-03'
          },
          {
            name: '使用PDI搭建开源数据交换平台.pdf',
            age: 24,
            address: 'London No. 1 Lake Park',
            date: '2016-10-01'
          },
          {
            name: 'main.doc',
            age: 24,
            address: 'London No. 1 Lake Park',
            date: '2016-10-01'
          },
          {
            name: '项目周报.xls',
            age: 30,
            address: 'Sydney No. 1 Lake Park',
            date: '2016-10-02'
          },{
            name: '湖光山色.mp4',
            age: 30,
            address: 'Sydney No. 1 Lake Park',
            date: '2016-10-02'
          },{
            name: '湖光山色.avi',
            age: 30,
            address: 'Sydney No. 1 Lake Park',
            date: '2016-10-02'
          },
          {
            name: 'Test.txt',
            age: 26,
            address: 'Ottawa No. 2 Lake Park',
            date: '2016-10-04'
          },
          {
            name: '高等职业院校内部质量保证体系建立与运行实务.pdf',
            age: 26,
            address: 'Ottawa No. 2 Lake Park',
            date: '2016-10-04'
          },
          {
            name: '素材.zip',
            age: 26,
            address: 'Ottawa No. 2 Lake Park',
            date: '2016-10-04'
          }
        ]
      }
    },mounted () {
      const that = this
      window.onresize = () => {
        return (() => {
          window.screenHeight = document.body.clientHeight
          that.screenHeight = window.screenHeight
        })()
      }
      that.fileTableHeight = that.screenHeight - 205
    },watch: {
      screenHeight (val) {
        this.screenHeight = val
        this.fileTableHeight = val - 205

      console.info(val)
      }
    }
  }
</script>
